<template>
  <div class="pages-contain-view">
    <el-card>
      <div class="markdown-html">
        <div class="code-content">
          <mark-down :content="markdown" @toHtml="showHtml"></mark-down>
        </div>
        <div class="code-content html" v-html="html"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import MarkDown from "@/components/markdown";
export default {
  components: {
    MarkDown
  },
  data() {
    return {
      markdown: {
        data: ""
      },
      html: "Markdown转换html预览区域"
    };
  },
  methods: {
    showHtml(html) {
      if (html !== "") {
        this.html = html;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.markdown-html {
  display: flex;
  .code-content {
    flex: 1;
    padding: 5px;
  }
  .html {
    max-height: 690px;
    overflow: auto;
  }
}
</style>